<template>
  <view class="box">
    <view class="tou topNoBg fixed" :style="'padding-top:' + statusBarHeight1 + 'px'">
      <image
        @click="fanhui"
        class="image1"
        src="https://pic.bangbangtongcheng.com/static/bbzc/recruitmentDetails/black_fanhui.png"
      />
      <!-- #ifndef MP-WEIXIN -->
      <text style="margin-left: 75rpx">
        {{ pageTitle }}
      </text>
      <!-- #endif -->
      <!-- #ifdef MP-WEIXIN -->
      <text style="margin-left: 75rpx">
        {{ pageTitle }}
      </text>
      <!-- #endif -->
    </view>
    <view>
      <view class="shangchuan" v-if="indexss==1">
        <view class="cu-form-group" style="padding: 0; border-radius: 20rpx; overflow: hidden">
          <view class="grid col-4 grid-square flex-sub">
            <view
              class="bg-img"
              style="width: 100%;height: 600rpx;"
              v-if="imageUrl"
            >
              <image
                @tap.stop="ViewImage"
                :src="imageUrl"
                mode="aspectFit"
              />
              <view class="cu-tag bg-red" @tap.stop="DelImg">
                <text class="cuIcon-close"></text>
              </view>
            </view>
            <view v-if="!imageUrl" 
              class="solids" style="width: 100%; margin: 0rpx; background-color: #ebebed"
              @tap="getPermissions(1)" >
              <text class="cuIcon-cameraadd"><span style="font-size: 24rpx">上传照片</span></text>
            </view>
            <!-- <view class="solids" @tap="getPermissions(1)" v-if="index == '0' && imgList.length < 2">
              <text class="cuIcon-cameraadd"></text>
            </view> -->
          </view>
        </view>
      </view>
      <view class="shangchuan" v-if="indexss==2">
        <view class="cu-form-group" style="padding: 0; border-radius: 20rpx; overflow: hidden">
          <view class="grid col-4 grid-square flex-sub">
            <view
			        v-if="videoUrl"
              class="bg-img"
              style="width: 100%; margin-right: 20rpx"
            >
              <view class="videoPlay" @click.stop="ylvideo(videoUrl)">
                <image :src="videoUrl + '?vframe/jpg/offset/0'" mode="aspectFit"></image>
                <image
                  class="images"
                  src="https://pic.bangbangtongcheng.com/static/bbcz/mdlb-sp01.png"
                  mode=""
                ></image>
              </view>
              <view class="cu-tag bg-red" @tap.stop="DelVidio">
                <text class="cuIcon-close"></text>
              </view>
            </view>
            <view
              class="solids"
              @tap="getPermissions(2)"
              v-if="!videoUrl"
              style="width: 100%; margin: 0rpx; background-color: #ebebed"
            >
              <text class="cuIcon-cameraadd"><span style="font-size: 24rpx">上传视频</span></text>
            </view>
            <!-- <view
              class="solids"
              @tap="getPermissions(2)"
              v-if="videoIndex == '0' && videoList.length < 1"
            >
              <text class="cuIcon-cameraadd"></text>
            </view> -->
          </view>
        </view>
      </view>
      <view class="inputGroup" v-if="indexss==1">
        <view class="title">
          <input type="text" placeholder="请输入标题" v-model="title" />
        </view>
        <view class="wenben">
          <textarea
            class="textarea"
            v-model="content"
            maxlength="300"
            placeholder="请输入描述"
            cols="30"
            rows="10"
          ></textarea>
          <span class="zishu">{{ content.length }}/300</span>
        </view>
      </view>
      <view class="button-box">
        <view v-show="id" class="button del" @click="delData">删除本{{ indexss == 1 ? '轮播' : '数据' }}</view>
        <view class="button" @click="submit">提交</view>

      </view>
    </view>
    <previewImgV ref="previewImgV"></previewImgV>
  </view>
</template>

<script>
  import permision from '@/js_sdk/wa-permission/permission.js'
  import { mapGetters } from 'vuex'
  import previewImgV from '@/components/previewImgV.vue'
  export default {
    data() {
      return {
        imgUrl: this.$imgSrc,
        pageTitle: '我的主页',
        imageUrl:'',
        videoUrl:'',
        index: -1,
        videoIndex: -1,
        title: '',
        content: '',
        type: 0, // 当前编辑主页的类型
        id:'',
        shopId:'',
        indexss:'',
        mdlbData:{},
        userInfo:{},
        fileType:'',
        businessType:''
      }
    },
    computed: {
      ...mapGetters(['userid', 'islogin', 'statusBarHeight1', 'userinfo']),
    },
    components: {
      previewImgV: previewImgV,
    },
    onLoad(option) {
      this.id = option.id
      this.shopId = option.shopId
      this.fileType = option.fileType
      this.businessType = option.businessType
      this.userInfo = uni.getStorageSync('Pduser')
      if(this.id){
        this.getdynamicList()
      }
      if (option.fileType == 1) {
        this.title = ''
      } else if (option.fileType == 2) {
      }
      this.indexss = option.fileType;
    },
    methods: {
		// 查询
      getdynamicList() {
        let that = this
        this.$myRequest
          .get('/mob/user/getArticleInfo', {
            pageSize: '999',
            pageNo: '1',
            businessType: this.businessType,
            shopId: this.shopId,
          id:this.id,
            type: '2',
          })
          .then((res) => {
            res.list.forEach((v,index) => {
          if (v.remarks == 2) {
            this.indexss=2
            this.videoUrl = v.image
          } else {
            this.indexss = 1
            this.imageUrl = v.image
            this.title = v.title
            this.content = v.content
          }
            })
          })
      },
      async delData(){
        const res = await this.$myRequest.get('/mob/user/delArticleInfo', {
          id: this.id,
          // shopId: this.shopId,
          // image: image,
          // businessType:this.businessType,
          // type: 2,
          // remarks: this.indexss,
          // title:this.title,
          // content:this.content,
          // createBy:this.userInfo.id
        })
        if (res.code == 200) {
          uni.showToast({
            title: '删除成功',
            icon: 'none',
          })
          this.id = '';
          this.title = '';
          this.content = '';
          this.indexss === 1 ? (this.imageUrl = '') : (this.videoUrl = '');
        }
      },
      submit() {
        let image = ''
        if (this.indexss==1){
          if(!this.imageUrl ){
            uni.showToast({
              title: '请上传图片',
              icon: 'none',
            })
            return
          }
          if(!this.title ){
            uni.showToast({
              title: '请填写标题',
              icon: 'none',
            })
            return
          }
          if(!this.content ){
            uni.showToast({
              title: '请填写内容',
              icon: 'none',
            })
            return
          }
          image = this.imageUrl 
        } else {
          if(!this.videoUrl ){
            uni.showToast({
              title: '请上传视频',
              icon: 'none',
            })
            return
          }
          image = this.videoUrl 
        }
        this.$myRequest
          .post('/mob/user/saveArticleInfo', {
            id: this.id,
            shopId: this.shopId,
            image: image,
            businessType:this.businessType,
            type: 2,
            remarks: this.indexss,
          title:this.title,
          content:this.content,
          createBy:this.userInfo.id
          })
          .then((data) => {
            if (data.code == 200) {
              uni.showToast({
                title: '提交轮播成功',
                icon: 'none',
              })
              setTimeout(function () {
                uni.navigateBack({
                  delta: 1,
                })
              }, 500)
            }
          })
	    },
      fanhui() {
        uni.navigateBack()
      },
      ylvideo(url) {
        this.$refs.previewImgV.open(url)
      },
      ViewImage(e) {
        let image = []
        image.push(e.currentTarget.dataset.url.url)
        uni.previewImage({
          urls: image,
          current: e.currentTarget.dataset.url.url,
        })
      },
      DelImg(e) {
        uni.showModal({
          title: '',
          content: `确定要删除该图片？`,
          cancelText: '取消',
          confirmText: '确定',
          success: (res) => {
            if (res.confirm) {
              this.imageUrl = ''
            }
          },
        })
      },
      DelVidio(e) {
        uni.showModal({
          title: '',
          content: `确定要删除该视频`,
          cancelText: '取消',
          confirmText: '确定',
          success: (res) => {
            if (res.confirm) {
              this.videoUrl = ''
            }
          },
        })
      },
      async getPermissions(type) {
        // #ifndef MP-WEIXIN
        this.ChooseImage(type)
        // #endif
        // #ifdef MP-WEIXIN
        this.ChooseImage(type)
        // #endif
      },
      ChooseImages(fileType) {
        let _this = this
        let itemList = []
        if (fileType==1){
          itemList = ['上传图片']
        } else {
          itemList = ['上传视频']
        }
          uni.showActionSheet({
            itemList: itemList,
            success: (res) => {
              _this.indexss = fileType
              _this.ChooseImage(fileType)
        },
          fail: function (res) {
          _this.fanhui()
          }
        })
      },
      ChooseImage(type) {
		    console.log(type,'咋是图片呢')
        let _this = this
        if (type == 1) {
          uni.chooseImage({
            count: 1,
            sizeType: ['copressed'],
            sourceType: ['camera', 'album'],
            success(res) {
              const tempFiles = res.tempFiles
              let panduan = false
              tempFiles.forEach((i, j) => {
                let length = ''
                // #ifdef H5
                length = i.name.length
                let resType = i.name.substring(length - 1, length)
                // #endif
                // #ifndef H5
                length = i.path.length
                let resType = i.path.substring(length - 1, length)
                // #endif
                if (resType != 'g' && resType != 'G') {
                  panduan = true
                }
              })
              if (panduan) {
                uni.showToast({
                  title: '不支持当前文件格式',
                  icon: 'none',
                })
                return
              }
              //_this.index = indexss;
              //因为有一张图片， 输出下标[0]， 直接输出地址
              var imgFiles = res.tempFilePaths
              // console.log(imgFiles);
              // if (_this.imgList.length + imgFiles.length > 1) {
              //   uni.showToast({
              //     title: '图片最多不能超过1张',
              //     duration: 2000,
              //     icon: 'none',
              //   })
              //   return
              // }
              var uper
              imgFiles.forEach((el) => {
                uni.showToast({
                  title: '正在上传请稍后',
                  icon: 'none',
                  duration: 2000,
                })
                uper = uni.uploadFile({
                  // 需要上传的地址
                  url: 'https://www.bangbangtongcheng.com/conven/ht/attach/qnUpload',
                  // filePath  需要上传的文件
                  filePath: el,
                  name: 'file',
                  success(res1) {
					  _this.imageUrl = JSON.parse(res1.data).data[0].url
                    // _this.imgList.push({
                    //   type: 'image',
                    //   url: JSON.parse(res1.data).data[0].url,
                    // })
                    // _this.index = '0'
                  },
                })
              })
              // onProgressUpdate 上传对象更新的方法
              uper.onProgressUpdate(function (res) {})
            },
            fail: (fail) => {
              // uni.showModal({
              //   title: '提示',
              //   content: '操作权限已被拒绝，请手动前往设置',
              //   confirmText: '立即设置',
              //   success: (res) => {
              //     if (res.confirm) {
              //       if (plus.os.name === 'iOS') {
              //         plus.runtime.openURL('app-settings://')
              //       } else {
              //         var Intent = plus.android.importClass('android.content.Intent')
              //         var Settings = plus.android.importClass('android.provider.Settings')
              //         var Uri = plus.android.importClass('android.net.Uri')
              //         var mainActivity = plus.android.runtimeMainActivity()
              //         var intent = new Intent()
              //         intent.setAction(Settings.ACTION_APPLICATION_DETAILS_SETTINGS)
              //         var uri = Uri.fromParts('package', mainActivity.getPackageName(), null)
              //         intent.setData(uri)
              //         mainActivity.startActivity(intent)
              //       }
              //     }
              //   },
              // })
            },
          })
        } else {
          uni.chooseVideo({
            count: 1,
            sourceType: ['camera', 'album'],
            success: (res) => {
              //_this.index = indexss;
              var imgFiles = res.tempFilePath
              //#ifdef H5
              const tempFiles = res.tempFile
              let resSize = tempFiles.size
              if (resSize > 52428800) {
                uni.showToast({
                  title: '上传视频大小不能超过50MB',
                  icon: 'error',
                })
                return
              }

              let resType = tempFiles.type.substring(0, 5)
              if (resType != 'video') {
                uni.showToast({
                  title: '不支持当前文件格式',
                  icon: 'error',
                })
                return
              }
              //#endif
              uni.showToast({
                title: '正在上传请稍后',
                icon: 'none',
                mask: true,
                duration: 2000,
              })
              var uper
              _this.video_chage = true
              uper = uni.uploadFile({
                // 需要上传的地址
                url: 'https://www.bangbangtongcheng.com/conven/ht/attach/qnUpload',
                // filePath  需要上传的文件
                filePath: imgFiles,
                name: 'file',
                success(res1) {
					 _this.videoUrl = JSON.parse(res1.data).data[0].url
                  // console.log(res);
                  // _this.videoList.push({
                  //   type: 'video',
                  //   url: JSON.parse(res1.data).data[0].url,
                  // })
                  // _this.videoIndex = '0'
                },
                fail: (err) => {
                  uni.showModal({
                    content: err.errMsg,
                    showCancel: false,
                  })
                },
                complete: (res) => {
                  /* 走到这里 不是完成就是失败 */
                  // console.log(res);
                  _this.video_chage = false
                },
              })
              // uper.onProgressUpdate(function (res) {
              //   console.log(res);
              //   if (res.progress === 100) _this.video_chage = false;
              // });
            },
            fail: (fail) => {
              // uni.showModal({
              //   title: '提示',
              //   content: '操作权限已被拒绝，请手动前往设置',
              //   confirmText: '立即设置',
              //   success: (res) => {
              //     if (res.confirm) {
              //       if (plus.os.name === 'iOS') {
              //         plus.runtime.openURL('app-settings://')
              //       } else {
              //         var Intent = plus.android.importClass('android.content.Intent')
              //         var Settings = plus.android.importClass('android.provider.Settings')
              //         var Uri = plus.android.importClass('android.net.Uri')
              //         var mainActivity = plus.android.runtimeMainActivity()
              //         var intent = new Intent()
              //         intent.setAction(Settings.ACTION_APPLICATION_DETAILS_SETTINGS)
              //         var uri = Uri.fromParts('package', mainActivity.getPackageName(), null)
              //         intent.setData(uri)
              //         mainActivity.startActivity(intent)
              //       }
              //     }
              //   },
              // })
            },
          })
        }
        // uni.showActionSheet({
        // 	itemList: ["上传图片", "上传视频"],
        // 	success: (res) => {
        // 		let indexss = res.tapIndex;

        // 	},
        // });
      },
    },
  }
</script>

<style lang="less" scoped>
  .button-box {
    width: 100%;
    height: 90rpx;
    position: fixed;
    bottom: 50rpx;
    left: 0rpx;
    display: flex;
    align-items: center;
    justify-content: space-around;
  }
  .button {
    width: 45%;
    height: 90rpx;
    background: #0fa291;
    border-radius: 45rpx;
    color: white;
    text-align: center;
    line-height: 90rpx;
    font-size: 32rpx;
  }

  .box {
    width: 100%;
    min-height: 100vh;
    // padding-bottom: 100rpx;
    background-color: #f5f7f9;
    padding-bottom: 200rpx;
  }

  .tou {
    position: relative;
    width: 100%;
    // height: 88rpx;
    text-align: left;
    line-height: 88rpx;
    font-size: 36rpx;
    color: black;
    //background-color: #64b6a8;

    .image1 {
      position: absolute;
      width: 32rpx;
      height: 32rpx;
      // top: 116rpx;
      left: 30rpx;
    }

    .image2 {
      position: absolute;
      width: 48rpx;
      height: 48rpx;
      bottom: 16rpx !important;
      // top: 116rpx;
      right: 30rpx;
      /* #ifdef MP-WEIXIN */
      position: initial;
      margin-left: auto;
      margin-right: 200rpx;
      /* #endif */
    }
  }

  .shangchuan {
    margin-top: 24rpx;
    //width: 710rpx;
    padding: 0 20rpx;
    border-bottom: 1px solid #eee;

    .videoPlay {
      width: 100%;
      height: 100%;

      .images {
        width: 40rpx;
        height: 40rpx;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
    }
  }

  .inputGroup {
    width: 710rpx;
    margin: 0 20rpx;
    background: white;
    border-radius: 20rpx;
    margin-top: 20rpx;
    padding: 30rpx 20rpx;

    view {
      border: 1rpx solid #cccccc;
      border-radius: 10rpx;
      margin-bottom: 20rpx;
      padding: 30rpx 20rpx;
      //color: #CCCCCC;
    }

    .title {
    }

    .wenben {
      position: relative;
      width: 670rpx;
      min-height: 250rpx;
      border-radius: 8rpx;
      // border: 1px solid #E0E0E0;
      margin: 0 auto;
      padding-bottom: 60rpx;

      .textarea {
        width: 100%;
        min-height: 200rpx;
        //padding: 10rpx;
        color: #333;
        font-size: 28rpx;
      }

      .zishu {
        position: absolute;
        right: 20rpx;
        bottom: 20rpx;
        //color: #64b6a8;
        font-size: 24rpx;
        background: #ebebed;
        border-radius: 4rpx;
        padding: 8rpx 24rpx;
      }
    }
  }
</style>
